¡Hola 👋! Espera mientras comienza la sesión.

Antes que todo, ¿cómo están?

Visualización de Información

IIC2026 2021-2

Color

Visualización de Información

IIC2026 2021-2

Próximos eventos:

Mañana (8 de septiembre) se realiza Ayudantía sobre Introducción a JS + D3.js.

Jueves revisamos Principios de diseño en visualización.

Jueves 9 de septiembre a las 20:00 termina plazo de Entrega 1 y se publica enunciado de Hito 1.

Contenido

Contenido

1. Qué es el color

2. Modelos y espacios de color

3. Percepción de canales de color

4. Colormaps

Modelos de color: RGB

(Fuente imagen: Libro virtual: "Programming Design Systems"; de Rune Madsen )

CSS soporta RGB como modelo y en hexadecimal

						.importante {
						  color: rgb(255, 0, 0); /* rojo */
						}

						.parrafo {
						  color: #ffffff; /* blanco */
						}
					

Modelos de color: HSV

(Fuente imagen: Libro virtual: "Programming Design Systems"; de Rune Madsen )

Modelos de color: HSL

(Fuente imagen: Libro virtual: "Programming Design Systems"; de Rune Madsen )

CSS soporta HSL como modelo

						.importante {
						  color: hsl(0, 100%, 50%); /* rojo */
						}

						.parrafo {
						  color:  hsl(0, 0%, 0%);  /* negro */
						}
					

Pasos no son perfectos en HSL

Colormaps

Asociación entre datos y colores.

Colormaps continuos

(Fuente color maps: D3 Scale Chromatic)

Colormaps segmentados

(Fuente color maps: D3 Scale Chromatic)

Colormaps categóricos

(Fuente color maps: D3 Scale Chromatic )

Colormaps secuenciales

(Fuente color maps: D3 Scale Chromatic )

Colormaps divergentes

(Fuente color maps : D3 Scale Chromatic)

Herramientas de utilidad:

• Escalas ya programadas: d3-scale-chromatic
• Colormaps ya escogidos con cuidado: Color Brewer
• Visualizar página web en blanco y negro: Publicación en Superuser
• Visualizar página web simulando daltonismo: Colorblinding (Extensión de Google Chrome)
• ¡Experimentando y probando con tu cuenta!

Caso

¡Mini actividad grupal!

Nos separaremos en grupos brevemente (5 minutos de discusión) para hacer críticas sobre algunos casos de visualizaciones.

Deben consensuar como grupo y definir una crítica sobre el uso de colormaps por caso, y eventualmente proponer una mejora. Puede ser tanto positiva como negativa.

Discutiremos todes juntes luego sus críticas.

Caso 1

Caso 2 (Visualización del día)

Color

Visualización de Información

IIC2026 2021-2

¡Nos vemos!